import React, { useEffect, useRef } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import { useTranslation } from 'react-i18next';


const PieDonut = () => {
    const { t } = useTranslation();

    const colors = Highcharts.getOptions().colors,
        categories = [
            t('Asia'),
            t('Europe'),
            t('Oceania'),
            t('America')
        ],
        data = [
            {
                y: 61.04,
                color: colors[2],
                drilldown: {
                    name: t('Asia'),
                    categories: [
                        t('Chinese mainland'),
                        t('Malaysia'),
                        t('Hong Kong'),
                        t('Taiwan'),
                        t('India'),
                        t('Dubai'),
                        t('South Korea'),
                        t('Iraq'),
                        t('Indonesia'),
                        t('Kazakhstan'),
                    ],
                    data: [
                        36.89,
                        18.16,
                        10.54,
                        0.7,
                        0.8,
                        0.41,
                        0.31,
                        0.13,
                        0.14,
                        0.1,
                    ]
                }
            },
            {
                y: 9.47,
                color: colors[3],
                drilldown: {
                    name: t('Europe'),
                    categories: [
                        t('Germany'),
                        t('U.K.'),
                        t('France'),
                        t('Italy'),
                        t('Netherlands'),
                        t('Switzerland'),
                        t('Finland'),
                        t('Russia'),
                        t('Poland')
                    ],
                    data: [
                        11.1,
                        2.01,
                        2.29,
                        0.49,
                        2.48,
                        0.64,
                        1.17,
                        0.13,
                        0.16
                    ]
                }
            },
            {
                y: 9.32,
                color: colors[5],
                drilldown: {
                    name: t('Oceania'),
                    categories: [
                        t('Australia'),
                        t('New Zealand'),
                    ],
                    data: [
                        6.62,
                        2.55,
                    ]
                }
            },
            {
                y: 8.15,
                color: colors[1],
                drilldown: {
                    name: t('America'),
                    categories: [
                        t('USA'),
                        t('Canada'),
                        t('Argentina'),
                        t('Brazil'),
                        t('Chile'),
                        t('Panama')
                    ],
                    data: [
                        4.17,
                        3.33,
                        0.11,
                        0.23,
                        0.16,
                        0.15
                    ]
                }
            }

        ],
        browserData = [],
        versionsData = [],
        dataLen = data.length;

    let i,
        j,
        drillDataLen,
        brightness;


    // Build the data arrays
    for (i = 0; i < dataLen; i += 1) {

        // add browser data
        browserData.push({
            name: categories[i],
            y: data[i].y,
            color: data[i].color
        });

        // add version data
        drillDataLen = data[i].drilldown.data.length;
        for (j = 0; j < drillDataLen; j += 1) {
            const name = data[i].drilldown.categories[j];
            brightness = 0.2 - (j / drillDataLen) / 5;
            versionsData.push({
                name,
                y: data[i].drilldown.data[j],
                color: Highcharts.color(data[i].color).brighten(brightness).get(),
                custom: {
                    version: name.split(' ')[1] || name.split(' ')[0]
                }
            });
        }
    }



    const options = {
        chart: {
            type: 'pie',
            style: {
                fontSize: '1em'
            },
        },
        title: {
            text: t('Follow my user source'),
            align: 'left'
        },
        // subtitle: {
        //     text: 'Source: <a href="http://statcounter.com" target="_blank">statcounter.com</a>',
        //     align: 'left'
        // },
        plotOptions: {
            pie: {
                shadow: false,
                center: ['50%', '50%']
            }
        },
        tooltip: {
            valueSuffix: '%'
        },
        series: [{
            name: 'Browsers',
            data: browserData,
            size: '45%',
            dataLabels: {
                color: '#ffffff',
                distance: '-50%'
            }
        }, {
            name: 'Versions',
            data: versionsData,
            size: '80%',
            innerSize: '60%',
            dataLabels: {
                format: '<b>{point.name}:</b> <span style="opacity: 0.5">' +
                    '{y}%</span>',
                filter: {
                    property: 'y',
                    operator: '>',
                    value: 1
                },
                style: {
                    fontWeight: 'normal'
                }
            },
            id: 'versions'
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 400
                },
                chartOptions: {
                    series: [{
                    }, {
                        id: 'versions',
                        dataLabels: {
                            distance: 10,
                            format: '{point.custom.version}',
                            filter: {
                                property: 'percentage',
                                operator: '>',
                                value: 2
                            }
                        }
                    }]
                }
            }]
        },
        credits: {
            // 是否显示版权链接
            enabled: false
        }
    };


    return (
        <HighchartsReact
            highcharts={Highcharts}
            options={options}
        />
    );
};

export default PieDonut;